<template>
  <div class="box">
    <div class="contain">
      <div class="tab">
        <div class="tab_nav">
          <div class="order">
            <ul>
              <li>
                <a
                  href="javascript:;"
                  @click="setSaleNumOrder"
                  :class="{ active: saleNumOrder }"
                  >销量</a
                >
              </li>
              <li>
                <a
                  href="javascript:;"
                  :class="{ active: !saleNumOrder }"
                  @click="
                    () => {
                      saleNumOrder = false;
                      priceOrder = !priceOrder;
                    }
                  "
                >
                  价格<i
                    class="iconfont"
                    :class="{
                      'icon-xiangxiajiantoucuxiao': priceOrder,
                      'icon-xiangshangjiantoucuxiao': !priceOrder,
                    }"
                  ></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="condition">
            <ul>
              <li>
                <label>
                  <input
                    type="checkbox"
                    name="Promotion"
                    v-model="addMoneyBuy"
                  />促销
                </label>
              </li>
              <li>
                <label>
                  <input
                    type="checkbox"
                    name="Promotion"
                    v-model="stages"
                  />分期
                </label>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="goods_data">
        <ul class="goods_list clearFix">
          <li class="goods_item" v-for="(goods, i) in goodsList" :key="i">
            <a href="javascript:;">
              <div>
                <img
                  :src="goods.currentGoods.goodsImgUrl"
                  alt=""
                  class="goods_img"
                />
              </div>
              <p class="goods_title">{{ goods.currentGoods.goodsName }}</p>
              <p class="goods_price">
                {{ goods.currentGoods.price }}元<s
                  v-if="goods.currentGoods.originPrice"
                  >{{ goods.currentGoods.originPrice }}元</s
                >
              </p>
              <ul class="small_img_list">
                <li
                  v-for="(item, index) in goods.goodsList"
                  :class="{ active: item.active }"
                  :key="index"
                  @mouseover="changeCurrentGoods(i, index)"
                >
                  <img :src="item.goodsImgUrl" alt="" />
                </li>
              </ul>
              <div class="discount">
                <div v-for="(discount, key, i) in goods.isDiscount" :key="i">
                  <img
                    :src="
                      key
                        ? key === 'stages'
                          ? 'http://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/05c84c8d8ffebf7fd17c8838b5d81ee6.png'
                          : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c02cd0743d6ded615afe101af6a8a918.png'
                        : ''
                    "
                    alt=""
                  />
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>

      <div class="pagination">
        <div
          class="pagination_box"
          @mouseover="enter($event)"
          @mouseout="leave"
          ref="paginationBox"
        >
          <button
            class="prev"
            @click="setPages(-1, true)"
            :disabled="currentPage === 1"
          >
            &lt;
          </button>
          <button
            class="page"
            :class="{ active: currentPage === page }"
            v-for="page in pages"
            :key="page"
            @click="setPages(page)"
            :data-index="page"
          >
            {{ page }}
          </button>
          <button
            class="next"
            @click="setPages(1, true)"
            :disabled="currentPage === pages"
          >
            &gt;
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPhoneList, getGoodsTotal } from "@/api/phone";
export default {
  name: "MiCategory",
  data() {
    return {
      goodsId: this.$route.query.keyId,
      currentPage: 1,
      limit: 16,
      goodsList: [],
      total: 0,
      stages: false,
      addMoneyBuy: false,
      saleNumOrder: false,
      priceOrder: false,
    };
  },
  methods: {
    async getGoodsList() {
      const res = await getPhoneList({
        id: this.goodsId,
        page: this.currentPage,
        limit: this.limit,
        stages: this.stages,
        addMoneyBuy: this.addMoneyBuy,
        saleNumOrder: this.saleNumOrder,
        priceOrder: this.priceOrder,
      });
      let currentGoods;
      this.goodsList = res.map((item) => {
        item.goodsList.map((goods, index) => {
          if (index === 0) {
            goods.active = true;
            currentGoods = goods;
          }
          return goods;
        });
        item.currentGoods = currentGoods;
        return item;
      });
    },
    async getGoodsTotal() {
      const result = await getGoodsTotal({
        id: this.goodsId,
        stages: this.stages,
        addMoneyBuy: this.addMoneyBuy,
      });
      this.total = result.length;
    },
    setPages(num, flag) {
      if (flag) {
        this.currentPage += num;
      } else {
        if (num === this.currentPage) return;
        this.currentPage = num;
      }
      this.getGoodsList();
      this.leave();
      const id = setInterval(() => {
        const currentY = document.documentElement.scrollTop;
        let moveNum = 25;
        if (currentY < 25) {
          moveNum = currentY;
          clearInterval(id);
        }
        window.scrollTo({
          top: currentY - moveNum,
        });
      }, 1);
    },
    enter(e) {
      if (e.target.nodeName === "BUTTON") {
        e.target.classList.add("active");
      }
    },
    leave() {
      for (let i = 0; i < this.$refs.paginationBox.children.length; i++) {
        if (
          this.$refs.paginationBox.children[i].dataset.index != this.currentPage
        ) {
          this.$refs.paginationBox.children[i].classList.remove("active");
        }
      }
    },
    changeCurrentGoods(i, goodsIndex) {
      let currentGoods;
      this.goodsList = this.goodsList.map((goods, index) => {
        if (index === i) {
          goods.goodsList.map((item, num) => {
            item.active = false;
            if (num === goodsIndex) {
              item.active = true;
              currentGoods = item;
            }
            return item;
          });
          goods.currentGoods = currentGoods;
        }
        return goods;
      });
    },
    setSaleNumOrder() {
      this.saleNumOrder = true;
      this.getGoodsList();
    },
    changeOrder() {
      this.currentPage = 1;
      this.getGoodsList();
      this.getGoodsTotal();
    },
  },
  async mounted() {
    this.getGoodsList();
    this.getGoodsTotal();
  },
  computed: {
    pages() {
      return Math.ceil(this.total / 20);
    },
  },
  watch: {
    stages: {
      handler() {
        this.changeOrder();
      },
    },
    addMoneyBuy: {
      handler() {
        this.changeOrder();
      },
    },
    saleNumOrder: {
      handler() {
        this.changeOrder();
      },
    },
    priceOrder: {
      handler() {
        this.changeOrder();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  background-color: #f5f5f5;
  .contain {
    font-size: 14px;
    width: 1226px;
    margin: 0px auto;
    .tab {
      overflow: auto;
      .tab_nav {
        display: flex;
        justify-content: space-between;
        height: 30px;
        margin: 40px 0px 20px;
        .order {
          // background-color: skyblue;
          ul {
            display: flex;
            li {
              height: 20px;
              padding: 0 30px;
              border-left: 1px solid #e0e0e0;
              line-height: 20px;
              &:first-child {
                border: none;
              }
              a {
                color: #333;
                transition: all 0.3s;
                &.active {
                  color: #ff6700;
                }
                &:hover {
                  color: #ff6700;
                }
              }
            }
          }
        }

        .condition {
          height: 30px;
          ul {
            display: flex;
            justify-content: space-between;
            li {
              margin-left: 30px;
              label {
                display: flex;
                align-items: center;
                height: 30px;
                input {
                  margin-right: 8px;
                  width: 18px;
                  height: 18px;
                  vertical-align: middle;
                }
              }
            }
          }
        }
      }
    }

    .goods_data {
      .goods_list {
        width: 1240px;
        .goods_item {
          float: left;
          margin: 0px 14px 14px 0px;
          width: 296px;
          height: 430px;
          background-color: #fff;
          transition: all 0.7s;
          &:hover {
            box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
          }
          a {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #333;
            .goods_img {
              margin-top: 47px;
              width: 200px;
              height: 200px;
              vertical-align: middle;
            }
            .goods_title {
              margin-top: 18px;
              font-size: 14px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .goods_price {
              color: #ff6700;
              s {
                color: #b0b0b0;
                margin-left: 5px;
              }
            }
            .small_img_list {
              margin-top: 15px;
              li {
                margin: 0px 4px;
                width: 34px;
                height: 34px;
                border: 1px solid #e0e0e0;
                float: left;
                img {
                  width: 100%;
                  height: 100%;
                }
                &.active {
                  border-color: #ff6700;
                }
              }
            }
            .discount {
              display: flex;
              margin-top: 24px;
              height: 18px;
              img {
                margin-left: 5px;
                height: 18px;
              }
            }
            &:hover .goods_title {
              color: #ff6700;
            }
          }
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      .pagination_box {
        margin: 15px 0px 50px;
        display: flex;
        justify-content: center;
        button {
          width: 48px;
          height: 30px;
          margin: 0 5px;
          border: none;
          text-align: center;
          font-size: 18px;
          font-weight: 200;
          line-height: 24px;
          color: #b0b0b0;
          background-color: #f5f5f5;
          &.active {
            background-color: #757575;
            color: #fff;
          }
          // &:hover {
          //   color: #fff;
          //   background-color: #757575;
          // }
          &[disabled] {
            color: #c0c4cc;
            cursor: not-allowed;
          }
        }
      }
    }
  }
}
</style>
